<template>

    <div class="app-container">
        <levelbar></levelbar>
        <div class="form-box">
            <div class="form-title">编辑活动</div>
            <el-form label-width="88px" class="app-content form" :rules="rules" :model="ruleForm" ref="ruleForm">

                <div class="form-item">
                    <div class="form-item-title">
                        <span class="title-level">活动名称和备注</span>
                    </div>
                    <div class="form-content">
                    <!-- <div class="appTitle"><h3>编辑活动</h3></div> -->
                        <el-row :gutter="20">
                            <el-col :span="9" :offset="5" style="margin-left:0">
                                <el-form-item label="活动名称" prop="activityName">
                                    <el-input v-model="ruleForm.activityName" placeholder="请输入活动名字" :maxlength="18"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-row  :gutter="20"> 
                            <el-col :span="9" :offset="5" style="margin-left:0">
                                <el-form-item label="备注">
                                    <el-input v-model="ruleForm.desc"  placeholder="请输入备注" :maxlength="11"></el-input>
                                </el-form-item>
                            </el-col>       
                        </el-row>
                    </div>
                </div>

                <div class="form-item">
                    <div class="form-item-title">
                        <!-- <span class="note-css"></span> -->
                        <span class="title-level"><P>活动图片<span style = "color: #ccc">（大图630*260, 支持 JPG PNG GIF 格式，5M以内的图片！）</span></p></span>
                    </div>
                    <div class="form-content">

                        <el-row  :gutter="20">
                            <el-col :span="12" class="upload-image">
                                <el-form-item prop="imageUrl">
                                    <fileUpload @onSuccess="onSuccess" @remove="fileImgRemove" :file-list-show.sync='imgOptions.fileListShow' :file-list.sync="imgOptions.fileList">
                                        <div class="el-upload-new el-upload-picture-new">
                                        <div class="up-container el-upload">
                                            <i class="el-icon-plus"></i>
                                        </div>
                                        </div>
                                    </fileUpload>
                                    <!--<fileUpload 
                                            @remove="fileImgRemove" 
                                            :isMultiple="imgOptions.isMultiple"
                                            :file-list.sync="imgOptions.fileList" 
                                            :file-list-show.sync="imgOptions.fileListShow" 
                                            :list-type="imgOptions.listType"
                                            :up-file-type="imgOptions.upFileType"
                                            :accept-list="imgOptions.accept"
                                            @onSuccess="onSuccess"
                                            >
                                                <img v-if="ruleForm.imageUrl" :src="ruleForm.imageUrl" class="avatar">
                                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                    </fileUpload>-->
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-row>
                            <el-col :span="12" style = "padding-top:20px">
                                <el-form-item label-width="0px" :show-message="showMess" prop="activityLink">
                                    <el-radio-group v-model="advradio" @change="changeRadio">
                                        <el-radio class="radio" label="1">活动链接</el-radio>
                                        <el-radio class="radio" label="0">自定义内容</el-radio>
                                    </el-radio-group>
                                    <el-input v-model="ruleForm.activityLink" v-show="advradio=='1'" placeholder="请输入" :maxlength="50" style="margin-top:30px"></el-input>
                                </el-form-item >   
                            </el-col>
                            <el-col :span="24" style="padding-left:0px">
                                    <div class="components-container" v-show="advradio=='0'">
                                        <div>
                                            <!--<Tinymce :height=280 v-model="content"></Tinymce>-->
                                            <Tinymce :id="tinymceId" :height="280" v-model="content"></Tinymce>
                                        </div>
                                        <!--<div class='editor-content' v-html='content'></div>-->
                                    </div>
                            </el-col>
                        </el-row>

                        <div class="areaTop"><P>投放区域</P></div>
                        <div v-if="roleType == 1">
                            <div v-if="onlineAgent">
                                <el-row :gutter="41">
                                    <el-col :span="10">
                                        <div v-if="onlineAgent == 1" >
                                            <el-form-item label-width="53px" label="省份" prop="fProvinceId">
                                                <province v-model="ruleForm.fProvinceId"></province>
                                            </el-form-item>
                                        </div>
                                        <div v-else>
                                            <el-form-item label-width="53px" label="省份" >
                                                <province v-model="ruleForm.fProvinceId"></province>
                                            </el-form-item>
                                        </div>
                                    </el-col>
                                </el-row>
                                <el-row :gutter="41">
                                    <el-col :span="10">
                                        <div v-if="onlineAgent == 2">
                                            <el-form-item label-width="53px" label="城市" prop="fCityId">
                                                <city v-model="ruleForm.fCityId" :province="ruleForm.fProvinceId" ></city>
                                            </el-form-item>
                                        </div>
                                        <div v-else>
                                            <el-form-item label-width="53px" label="城市">
                                                <city v-model="ruleForm.fCityId" :province="ruleForm.fProvinceId" ></city>
                                            </el-form-item>
                                        </div>
                                    </el-col>
                                </el-row>
                                <el-row :gutter="41">
                                    <el-col :span="10">
                                        <div v-if="onlineAgent == 3">
                                            <el-form-item label-width="53px" label="区县" prop="fAreaId">
                                                <region v-model="ruleForm.fAreaId" :city="ruleForm.fCityId" ></region>
                                            </el-form-item>
                                        </div>
                                        <div v-else>
                                            <el-form-item label-width="53px" label="区县">
                                                <region v-model="ruleForm.fAreaId" :city="ruleForm.fCityId" ></region>
                                            </el-form-item>
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>

                            <div v-if="negativeAgent == 1">
                                <el-row :gutter="41">
                                    <el-col :span="10">
                                        <el-form-item label-width="53px" label="省份" prop="fProvinceId">
                                            <province v-model="ruleForm.fProvinceId"></province>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row :gutter="41">
                                    <el-col :span="10">
                                        <el-form-item label-width="53px" label="城市">
                                            <city v-model="ruleForm.fCityId" :province="ruleForm.fProvinceId" ></city>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row :gutter="41">
                                    <el-col :span="10">
                                        <el-form-item label-width="53px" label="区县">
                                            <region v-model="ruleForm.fAreaId" :city="ruleForm.fCityId" ></region>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </div>
                            <div v-if="negativeAgent == 2">
                                <el-row :gutter="41">
                                    <el-col :span="10">
                                        <el-form-item label-width="53px" label="省份" prop="fProvinceId">
                                            <province v-model="ruleForm.fProvinceId"></province>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row :gutter="41">
                                    <el-col :span="10">
                                        <el-form-item label-width="53px" label="城市" prop="fCityId">
                                            <city v-model="ruleForm.fCityId" :province="ruleForm.fProvinceId" ></city>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row :gutter="41">
                                    <el-col :span="10">
                                        <el-form-item label-width="53px" label="区县">
                                            <region v-model="ruleForm.fAreaId" :city="ruleForm.fCityId" ></region>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </div>
                            <div v-if="negativeAgent == 3">
                                <el-row :gutter="41">
                                    <el-col :span="10">
                                        <el-form-item label-width="53px" label="省份" prop="fProvinceId">
                                            <province v-model="ruleForm.fProvinceId"></province>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row :gutter="41">
                                    <el-col :span="10">
                                        <el-form-item label-width="53px" label="城市" prop="fCityId">
                                            <city v-model="ruleForm.fCityId" :province="ruleForm.fProvinceId" ></city>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row :gutter="41">
                                    <el-col :span="10">
                                        <el-form-item label-width="53px" label="区县" prop="fAreaId">
                                            <region v-model="ruleForm.fAreaId" :city="ruleForm.fCityId" ></region>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </div>
                        </div>
                        <div v-else>
                            <el-row :gutter="41">
                                <el-col :span="10">
                                    <el-form-item label-width="53px" label="省份">
                                    <province v-model="ruleForm.fProvinceId"></province>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="41">
                                <el-col :span="10">
                                    <el-form-item  label-width="53px" label="城市">
                                    <city v-model="ruleForm.fCityId" :province="ruleForm.fProvinceId" ></city>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="41">
                                <el-col :span="10">
                                    <el-form-item label-width="53px" label="区县">
                                        <region v-model="ruleForm.fAreaId" :city="ruleForm.fCityId" ></region>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </div>
                        <!--<el-row :gutter="20">
                            <el-col :span="8" class="myArea">
                                <el-form-item label="所属省">
                                    <province v-model="ruleForm.fProvinceId"></province>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" class="myArea">
                                <el-form-item label="所属市">
                                    <city v-model="ruleForm.fCityId" :province="ruleForm.fProvinceId"></city>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" class="myArea">
                                <el-form-item label="所属区县">
                                    <region v-model="ruleForm.fAreaId" :city="ruleForm.fCityId"></region>
                                </el-form-item>
                            </el-col>
                        </el-row>-->
                        
                    </div>
                </div>


                <div class="form-item">
                    <div class="form-content">
                        <el-row :gutter="41" type="flex" justify="center">
                            <el-col :span="2"><el-button @click="resetForm">取消</el-button></el-col>
                            <el-col :span="2"><el-button type="primary" @click="submitForm('ruleForm')">确认</el-button></el-col>
                        </el-row>
                    </div>
                </div>

                <!--<div class="form-item">
                    <el-row>
                        <el-col :span="24">
                            <div class="footer">
                                <el-button @click="resetForm">取消</el-button>
                                <el-button type="primary" @click="submitForm('ruleForm')">确认</el-button>
                            </div>
                        </el-col>
                    </el-row>
                </div>-->
                    
            </el-form>

        </div>
    </div>
</template>

<script>
import { getDetail, changeActivity, uploadActivity } from 'api/activityManagement';
import Levelbar from '../../layout/Levelbar';
import Tinymce from 'components/Tinymce';
import fileUpload from 'components/Upload/fileUpload';
import moment from 'moment';
import { mapGetters } from 'vuex';
import province from 'components/CascadeRegion/province';
import city from 'components/CascadeRegion/city';
import region from 'components/CascadeRegion/region';
export default{
    name: 'editActivity',
    components: {Levelbar, Tinymce, fileUpload, province, city, region},
    data() {
        var validatePass = (rule, value, callback) => {
            if (this.advradio == '1') {
                var regUrl =/^(http|https)+:\/\/(\w+(-\w+)*)(\.(\w+(-\w+)*))*(\/?\S*)?$/;
                if (this.ruleForm.activityLink == '') {
                    callback(new Error('请输入链接'));
                } else if (!regUrl.test(this.ruleForm.activityLink)) {
                    callback(new Error("请填完整的活动链接，活动链接需以'http://'或者'https://'开头"));
                } else {
                    callback();
                }
            } else {
                callback();
            }
        };
        var pass = (rule, value, callback) => {
            callback();
        }; 
        return {
            imgOptions: {
                upFileType: 'image',
                fileListShow: true,
                fileList: [],
                isMultiple: false
            },
            tinymceId: 'tinymceId',
            advradio: '1', // 按钮切换
            content: '',
            imgUrl: '', // 图片路径
            activityId: '', // 活动id
            onlineAgent: '',
            negativeAgent: '',
            showMess: true, // 按钮切换
            schoolLoading: false,
            schoolLoadingSub: false,
            ruleForm: {
                fProvinceId: null,
                fAreaId: null,
                fCityId: null,
                activityName: null,
                desc: null,
                activityLink: '',
                imageUrl: null
            },
            rules: {
                activityName: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { pattern: /^[^\s]+$/, message: '请输入合法的活动名称', trigger: 'blur' }
                ],
                activityLink: [
                    { required: true, validator: validatePass, trigger: 'blur' }
                ],
                imageUrl: [
                    { required: true, validator: pass, trigger: 'change' }
                ],
                fProvinceId: [
                    { required: true, message: '请选择省份', trigger: 'change' }
                ],
                fCityId: [
                    {required: true, message: '请选择城市', trigger: 'change'}
                ],
                fAreaId: [
                    {required: true, message: '请选择区县', trigger: 'change'}
                ]
            }
        }
    },
    created() {
        this.activityId = this.$route.params.id; 

        this.getDetailInfo(this.activityId);

        this.getAgentTypes();
    },
    computed: {
        ...mapGetters([
            'uid',
            'roleType',
            'agentTypes'
        ])
    },
    methods: {
        // 判断省市区代
        getAgentTypes() {
            // 省代理就是[1]，市代[2],区代[3],如果既是省代又是市代就是[1,2],如果既是省代又是市代又是区代就是[1,2,3]
            if (this.agentTypes == 'null') return false;
            let numGent = JSON.parse(this.agentTypes).length;
            if (numGent > 1) {
                // 多种代理
                this.negativeAgent = '1'
                if (numGent == 2) {
                    this.negativeAgent = '2'
                } else if (numGent == 3) {
                    this.negativeAgent = '3';
                }
            } else {
                // 单独代理
                return this.onlineAgent = JSON.parse(this.agentTypes)[0]
            }
        },
        // 获取详情
        getDetailInfo(id) {
            getDetail(id).then(response => {
                if (response.data.status == 200) {
                    // 单个图片
                    console.log('response.data1111111111', response);
                    if (response.data.content.picture !== '') {
                        this.imgOptions.fileList.push({name: '', url: response.data.content.picture})
                    }
                    this.searchFetchData(response);
                }
            });
        },
        // 页面展示数据
        searchFetchData(response) {

            this.content = response.data.content.html?response.data.content.html:'';
            this.ruleForm.activityName = response.data.content.title;
            this.ruleForm.desc = response.data.content.desc;
            this.ruleForm.fProvinceId = response.data.content.provinceId;
            this.ruleForm.fCityId = response.data.content.cityId;
            this.ruleForm.fAreaId = response.data.content.areaId;
            this.ruleForm.imageUrl =response.data.content.picture;
            this.ruleForm.activityLink = response.data.content.htmlUrl;
        },
        // 获取数据
        getParameter() {
            this.ruleForm.fProvinceId = (this.ruleForm.fProvinceId === ''|'请选择') ? null : this.ruleForm.fProvinceId;
            this.ruleForm.fCityId = (this.ruleForm.fCityId === ''|'请选择')? null:this.ruleForm.fCityId;
            this.ruleForm.fAreaId = (this.ruleForm.fAreaId === ''|'请选择')? null:this.ruleForm.fAreaId;
                        
            this.ruleForm.desc = (this.ruleForm.desc === '')? null:this.ruleForm.desc;
        },
        // 取消
        resetForm() {
            this.$router.push({path: '/activityManagement'});
        },
        // 提交
        submitForm(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    if (this.ruleForm.imageUrl === null) {
                        this.$message({
                            type: 'warning',
                            message: '请上传图片！'
                        });
                        return;
                    }
                    if (this.imgOptions.fileListShow==false) {
                        this.imgOptions.fileList=[];
                        this.$message({
                            type: 'info',
                            message: '请上传图片！'
                        });
                        return;
                    }
                    if (this.advradio=='0') {
                        let tempHtml = window.tinymce.get('tinymceId').getContent({format: 'raw'});
                        if (tempHtml.indexOf('img') === -1) {// 没图片 判断有字否
                            if (!window.tinymce.get('tinymceId').getContent({format: 'text'}).trim()) {
                                this.$message.info('请输入内容');
                                return false;
                            } else if (window.tinymce.get('tinymceId').getContent({format: 'text'}).trim().length > 2500) {
                                this.$message.info('输入字数不得大于2500字');
                                return false;
                            }
                        } else {// 有图片 字长度判断
                            if (window.tinymce.get('tinymceId').getContent({format: 'text'}).trim().length > 2500) {
                                this.$message.info('输入字数不得大于2500字');
                                return false;
                            }
                        }
                    }
                    this.$confirm('确定要提交吗?', '', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: ''
                    }).then(() => {
                        let adverUrl = null,
                            html = null;
                        if (this.advradio == '1') {
                            adverUrl = this.ruleForm.activityLink;
                        } else if (this.advradio == '0') {
                            html = this.content;
                        }
                        adverUrl = (adverUrl==='')? null:adverUrl;
                        html = (html==='')? null:html;

                        this.getParameter();

                        let time = moment(new Date()).format('YYYY-MM-DD HH:mm:ss');
                        if (html !== null) {
                            uploadActivity(this.ruleForm.activityName, this.ruleForm.imageUrl, html, this.ruleForm.desc, time).then(res => {
                                adverUrl = res.data.content;
                            }).then(() => {
                                changeActivity(this.$route.params.id, this.ruleForm.activityName, this.ruleForm.imageUrl, adverUrl, html,
                                this.ruleForm.fProvinceId, this.ruleForm.fCityId, this.ruleForm.fAreaId, this.ruleForm.desc).then(response => {
                                    if (response.data.status == 200) {
                                        this.$message({
                                            type: 'success',
                                            message: '编辑成功!'
                                        })
                                        this.$router.push({ path: '/activityManagement/activityManagement' });
                                    } else {
                                        this.$message({
                                            type: 'warning',
                                            message: response.data.errorMsg
                                        })
                                    }
                                    this.$store.dispatch('UpdateCache', true); // 列表刷新
                                });
                            })
                        } else {
                            // 编辑活动
                            changeActivity(this.$route.params.id, this.ruleForm.activityName, this.ruleForm.imageUrl, adverUrl, html,
                            this.ruleForm.fProvinceId, this.ruleForm.fCityId, this.ruleForm.fAreaId, this.ruleForm.desc).then(response => {
                                if (response.data.status == 200) {
                                    this.$message({
                                        type: 'success',
                                        message: '编辑成功!'
                                    })
                                    this.$router.push({ path: '/activityManagement/activityManagement' });
                                } else {
                                    this.$message({
                                        type: 'warning',
                                        message: response.data.errorMsg
                                    })
                                }
                                this.$store.dispa7tch('UpdateCache', true); // 列表刷新
                            });
                        }
                        
                    }).catch((e) => {
                        console.log(e)
                    });
                } else {
                    return false;
                }
            });
        },
        // 上传图片
        onSuccess(data) {
            this.ruleForm.imageUrl = data.imgUrl;
            this.$message.success('上传成功'); 
        },
        // 移除图片
        fileImgRemove(data) {
            this.ruleForm.imageUrl = null; 
        },
        // 切换按钮
        changeRadio(a) {
            if (this.advradio == '1') {
                this.showMess = true;
            } else {
                this.showMess = false;
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.app-container {
    position: relative;
    padding: 20px 20px 10px;
    $bgcolor: #fff;

    @mixin showTitle() {
        background: $bgcolor;
        box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
        -webkit-box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    }
    .form-box {
        padding: 0 50px;
        @include showTitle();
        .form-title {
            padding-top:8px;
            text-align: center;
            font-size: 18px;
            color: #333;
            line-height: 72px;
            font-weight: bold;
            font-family: Microsoft YaHei;
            border-bottom: 1px solid #ddd;
        }
        .form {
            .form-item {
                padding-bottom: 40px;
                .form-item-title {
                    margin: 40px 0;
                    font-size: 14px;
                    color: #333;
                    line-height: 14px;
                    border-left: 4px solid #ff5e2c;
                    text-indent: 16px;
                
                    .note-css {
                        vertical-align: middle;
                        display: inline-block;
                        width: 4px;
                        height: 14px;
                        margin-right: 26px;
                        border-left: 3px solid #ff5e2c;
                        // background: #30B08F url('../../../images/student/noteLavel.png') no-repeat 0 0;
                    }
                }
                .form-content {
                    margin: 0 8px;
                }
                .item {
                    margin-bottom: 20px;
                }
                .back {
                    margin-top: 20px;
                }
                .footer {
                    //float: right;
                    text-align: center;
                    margin-top: 40px;
                }
                .title-way {
                    padding-right: 15px;
                }
                .control {
                    text-align: right;
                }
            }
        }
    }
    .el-form{
        // padding-Top:30px;
        // background:#fff;
        // padding-bottom:170px;
        .appTop,
        .picTop,
        .areaTop {
        padding: 40px 0 20px 0px;
        // margin-bottom: 12px;
        position: relative;
        margin-left: -10px;
        }
        .appTop p,
        .picTop p,
        .areaTop p {
        margin-left: 15px;
        font-size: 14px;
        color: #333;
        }
        .areaTop p{
            margin-left: 0;
        }
        
        .el-form-item{
            margin-top:8px;
        }
        .appTop:before {
            content: '';           
            float: left;
            border-radius: 2px;
            width:4px;
            height:16px;
            background:#ff5e2c;
            margin-top:2px;
        }
        .picTop:before{
            content: "*";
            float: left;
            color: #ff5e2c;
            width: 20px;
            font-size: 12px;
            padding-top: 2px;
            padding-left: 10px;
        }
        .addContinue{
            margin-left:60px;
            margin-top:20px
        }
        .appTitle{
            padding: 0px 0 30px 50px;
            // margin-bottom:30px;
            text-align:center;
            border-bottom:1px solid #ECECEC
        }
        .box{
            padding: 0px 50px 0;
            background:#fff;
            margin-left:10px;
        }
        .subjectKuang{
            padding:5px 5px 40px 5px;
            width:470px;
        }
        .el-tag{
            margin-left:10px;
            background:#f9f9f9;
            color:#444;
        }
        .footer {
          //float: right;
          text-align: center;
          margin-top: 60px;
        }
    }

    .upload-image {
        margin-left: 0;            
        .avatar {
            width: 146px;
            height: 146px;
            display: block;
            border-radius: 8px;
        }
    }
    .tip{
        font-size: 14px;
        color: #ff5e2c;
    }
}

</style>